<!--入库验收详情-->
<template>
  <div>
    <cus-search style="min-width: 1200px">
      <cus-search-item>
        <Form
          :model="form"
          :label-width="80"
          @keydown.native.enter.prevent="onInit"
        >
          <FormItem label="起止日期" :label-width="80" class="mr_24 mb_20">
            <DatePicker
              type="daterange"
              transfer
              v-model="dateStr"
              format="yyyy-MM-dd"
              @on-change="sDateChange"
              placeholder="开始日期 - 结束日期"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="供应商" :label-width="60" class="mr_24 mb_20">
            <Input placeholder="请输入供应商" v-model="form.supplierName" />
          </FormItem>
          <FormItem label="验收员" :label-width="60" class="mr_24 mb_20">
            <Input placeholder="请输入验收员" v-model="form.checkName" />
          </FormItem>
          <FormItem label="采购单号" :label-width="80" class="mr_24 mb_20">
            <Input placeholder="请输入采购单号" v-model="form.billNo" />
          </FormItem>
          <FormItem label="入库方式" :label-width="80" class="mr_24 mb_20">
            <Select
              size="large"
              placeholder="全部"
              v-model="form.storageway"
              @on-change=""
              style="width: 200px"
            >
              <Option
                v-for="item in storagewayTree"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="仓库类型" :label-width="80" class="mr_24 mb_20">
            <Select
              size="large"
              placeholder="全部"
              v-model="form.storageway"
              @on-change=""
              style="width: 200px"
            >
              <Option
                v-for="item in stockTypeTree"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <cusButton
            class="mr_10 mb_20"
            type="primary"
            @onClick="getGoodsStockbilListApi"
            >查询</cusButton
          >
        </Form>
      </cus-search-item>
    </cus-search>
    <cus-allcard style="margin-top: 24px; padding-top: 24px" :showTitle="false">
      <Table
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :height="
          data.length == 0
            ? '120'
            : tableHeight > data.length * 48 + 50
            ? data.length * 48 + 50
            : tableHeight
        "
      >
        <template slot-scope="{ row }" slot="statusOperation">
          <div class="flex" v-if="row.coursePic">
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF' }"
              @onClick="coursePicShow(row)"
            >
              查看
            </cus-button>
          </div>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 5px"
              @onClick="onShow(row)"
            >
              查看
            </cus-button>
            <cus-button
              type="text"
              size="small"
              v-if="row.checkStatus == '未确认'"
              :style="{ color: '#FF4746' }"
              style="padding: 0 5px"
              @onClick="onConfirm(row)"
            >
              确认
            </cus-button>
          </div>
        </template>
      </Table>
      <div class="mt_24 cus_page">
        <cus-page
          :data="pages"
          class="mt_24"
          @pageChange=""
        ></cus-page>
      </div>
    </cus-allcard>  
  </div>
</template>

<script>
import {  } from "@/api/business/manager";
const form = {
  supplierName: "", //供应商名称
  storageway: "", // 入库方式
  startDate: "", //开始日期
  stopDate: "", //结束日期
  checkName: "", //验收员
  billNo: "", //采购单号
  loading: false,
};
const storagewayTree = [
  {
    label: "全部",
    value: "",
  },
  {
    label: "手工入库",
    value: 0,
  },
  {
    label: "电子秤采购入库",
    value: 1,
  },
  {
    label: "电子秤无单入库",
    value: 2,
  },
  {
    label: "配送单入库",
    value: 3,
  },
];
const stockTypeTree = [
  {
    label: "全部库",
    value: "",
  },
  {
    label: "物资库",
    value: "goods",
  },
  {
    label: "产品库",
    value: "product",
  },
];
const columns = [
  {
    title: "序号",
    type: "index",
    align: "center",
    minWidth: 70,
  },
  {
    title: "采购单号",
    key: "billNo",
    minWidth: 175,
    align: "center",
  },
  {
    title: "单据日期",
    slot: "billDateOperation",
    minWidth: 135,
    align: "center",
  },
  {
    title: "供应商",
    key: "supplierName",
    minWidth: 135,
    align: "center",
  },
  {
    title: "验收员",
    key: "checkName",
    minWidth: 135,
    align: "center",
  },
  {
    title: "入库方式",
    key: "storageway",
    minWidth: 135,
    align: "center",
  },
  {
    title: "状态",
    key: "checkStatus",
    minWidth: 135,
    align: "center",
  },
  {
    title: "最新验收时间",
    key: "updateTime",
    minWidth: 175,
    align: "center",
  },
  {
    title: "凭证",
    slot: "voucherOperation",
    key: "voucher",
    minWidth: 135,
    align: "center",
  },
  {
    title: "过程照片",
    slot: "statusOperation",
    minWidth: 135,
    align: "center",
  },
  {
    title: "操作",
    fixed: "right", // 右侧固定
    slot: "operation",
    align: "center",
    minWidth: 175,
  },
];
export default {
  components: { },
  data() {
    return {
      form: form,
      ruleValidate: {}, //rule验证
      columns: columns, // 表头
      data: [], // 表格列表
      // 分页
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      tableHeight: 0,
    };
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 64 - 40 - 88 - 24 - 24 - 24 - 40; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    // this.onInit();
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 64 - 40 - 24 - 40 - 40; // 表格自适应高度
      }, 100);
    },
    onInit() {
    },
  
  },
};
</script>

<style lang="less" scoped>
</style>